<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品查询</title>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/goodlist.css" />
		<script src="js/ajax.js"></script>
		<script src="js/goodlist.js"></script>
	</head>
	<body>
		<div class="header">
			<div class="h_link_bg">
				<div class="h_link">
					<div class="h_logo"><img src="img/register.png" alt="" /></div>
					<div class="h_content">
						<ul>
							<li><a href="login.html">登录</a></li>
							<li><a href="register.html">注册</a></li>
							<li><a href="">|</a></li>
							<li class="myCart">
								<a href="shopping cart.html">购物</a>
								<div class="car">
									<p>你的购物车暂时没有商品...</p>
									<p>快去抢购良仓商品吧!</p>
								</div>
							</li>
							<li><a href="">|</a></li>
							<li class="message">
								<a href="">消息</a>
								<div>
									<ul>
										<li><a href="#">动态<span>0</span></a></li>
										<li><a href="#">评论<span>0</span></a></li>
										<li><a href="#">私信<span>0</span></a></li>
										<li><a href="#">喜欢<span>0</span></a></li>
										<li><a href="#">粉丝<span>0</span></a></li>
										<li><a href="#">通知<span>0</span></a></li>
									</ul>
								</div>
							</li>
							<li><a href="">|</a></li>
							<li><a href="">添加良品</a></li>
							<li><a href="">资质证照|协议规则</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="h_nav">
				<ul>
					<li><a href="index.html">首页</a></li>
					<li class="good_type">
						<a href="#">商店</a>
						<div>
							<div class="type_list">
								<ul>
									<!--<li>
										<a href="#">
										    <img src="img/nav_icon3.png" alt="" />
										    <p>玩乐</p>
										</a>
									</li>-->
								</ul>
							</div>
							<div class="type_img">
								<div><img src="img/nav_banner.jpg" alt="" /></div>
								<p>新视界:2024年12月刊</p>
							</div>
							<div class="type_link">
								<p>
									<a href="#">查看所有品牌</a>
									<a href="#">最新到货</a>
								</p>
							</div>
						</div>
					</li>
					<li class="magazine">
						<a href="magazine.html">杂志</a>
						<div>
							<ul>
								<li><a href="">趣物</a></li>
								<li><a href="">数码</a></li>
								<li><a href="">汽车</a></li>
								<li><a href="">文化</a></li>
								<li><a href="">时尚</a></li>
								<li><a href="">美食</a></li>
								<li><a href="">建筑</a></li>
								<li><a href="">空间</a></li>
								<li><a href="">圈子</a></li>
								<li><a href="">清洁</a></li>
								<li><a href="">活动</a></li>
								<li><a href="">视频</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">分享</a></li>
					<li><a href="#">达人</a></li>
					<li><a href="#">有偿资讯</a></li>
					<div class="search">
					    <input type="text" name="keyWorks" id="searchInput" placeholder="请输入搜索关键词" />
					    <div id="searchBtn"></div>
					</div>
				</ul>
			</div>
		</div>

		<div class="body">
			<div class="title">
				<div class="title_img"></div>
				<div class="title_text">
					<p><span>全场包邮</span>(限中国大陆)</p>
					<p>特殊商品除外</p>
				</div>
				<div class="title_h1">
					<p><span>Shop</span>商店</p>
				</div>
				<div class="pangxie">
					<img src="img/pangxie.jpg" />
				</div>
			</div>
		</div>

		<div class="menu">
			<div>
				<p><a href="">良仓</a> > <a href="">商店</a> > <a href="">所有商品</a> <span class="type"></span></p>
				<div class="typeList">
					<ul>
						<li><a href="#"><img src="img/n.png" />新品</a></li>
						<li><a href="goodlist.html?catId=1">家居</a></li>
						<li><a href="goodlist.html?catId=2">文具</a></li>
						<li><a href="goodlist.html?catId=3">数码</a></li>
						<li><a href="goodlist.html?catId=4">玩乐</a></li>
						<li><a href="goodlist.html?catId=5">餐厨</a></li>
						<li><a href="goodlist.html?catId=6">美食</a></li>
						<li><a href="goodlist.html?catId=7">服装</a></li>
						<li><a href="goodlist.html?catId=8">鞋包</a></li>
						<li><a href="goodlist.html?catId=9">配饰</a></li>
						<li id="sx">
							<a href="#">价格筛选<span class="icon_price"></span></a>
							<div class="price_list">
								<ul>
									<li><a href="#">全部</a></li>
									<li><a href="#">0-100</a></li>
									<li><a href="#">301-1000</a></li>
									<li><a href="#">1001-2000</a></li>
									<li><a href="#">2001-4000</a></li>
									<li><a href="#">4001以上</a></li>
								</ul>
							</div>
						</li>
						<li><a href="goodlist.html?catId=10">美护</a></li>
						<li><a href="goodlist.html?catId=11">出行</a></li>
						<li><a href="goodlist.html?catId=12">图书</a></li>
						<li><a href="goodlist.html?catId=13">艺术</a></li>
						<li><a href="goodlist.html?catId=14">水具</a></li>
						<li><a href="goodlist.html?catId=15">运动</a></li>
						<li><a href="goodlist.html?catId=16">品牌</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="good_list">
			<div class="good_list_top"></div>
			<!-- 分页控件 -->
			<div class="pagination">
				<a href="#" id="prevPage">上一页</a>
				<span id="pageInfo">第1页</span>
				<a href="#" id="nextPage">下一页</a>
			</div>
		</div>

		<div class="footer">
			<div class="logo">
				<div class="logo_title">
					<div class="logo_finger"></div>
					<div>
						<p>良仓商品/OUR SHOP</p>
					</div>
				</div>
				<div class="logo_list">
					<ul>
						<li>
							<div class="icon1"></div>
							<div>
								<p>全球精品</p>
								<p>Global Selections</p>
							</div>
						</li>
						<li>
							<div class="icon2"></div>
							<div>
								<p>正品保证</p>
								<p>Authenticity Guaranteed</p>
							</div>
						</li>
						<li>
							<div class="icon3"></div>
							<div>
								<p>全场包邮</p>
								<p>Free Delivery</p>
							</div>
						</li>
						<li>
							<div class="icon4"></div>
							<div>
								<p>客服邮箱</p>
								<p>kefu@iliangcang.com</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="footer_bg">
				<div class="footer_info">
					<div class="info">
						<div>
							<div class="icon_phone"></div>
							<div>
								<p>iPhone Android</p>
								<p>客户端下载</p>
							</div>
						</div>
						<div>
							<ul>
								<li><img src="img/dou.png" /></li>
								<li><img src="img/wb.png" /></li>
								<li><img src="img/qq.png" /></li>
							</ul>
						</div>
					</div>
					<div class="address">
						<p><a href="#">关于良仓</a>|<a href="#">服务协议</a>|<a href="#">隐私保护协议</a>|<a href="#">使用指南</a>|<a
								href="#">联系我们</a>|
							<a href="#">加入我们</a>|<a href="#">友情链接</a>|<a href="#">私信良仓</a>
						</p>
						<p>©2013-2019 北京良仓文化传播有限公司版权所有</p>
						<p>公司名称：北京良仓文化传播有限公司 客服邮箱：kefu@iliangcang.com</p>
						<p>公司地址：北京朝阳区百子湾路32号6号楼1层60号.</p>
						<p>社会信用统一代码：91110105059231575L 食品许可证：JY11105160159557 </p>
						<p>图书证名称：中华人民共和国出版物经营许可证 图书证编号：新出发京零 字第 朝 150051 号</p>
						<p>京ICP备13010677号-1 京公网安备11010502025627</p>
					</div>
				</div>
			</div>

			<div class="side">
				<div class="code">
					<div class="qrCode"><img src="img/orcode10.png" alt="" /></div>
					<div><button class="close"></button></div>
				</div>
				<div class="arrow"></div>
				<div class="concart">联系客服</div>
			</div>
		</div>
	</body>
	<script src="js/public.js"></script>
	<script>
		// 获取URL参数
		function getQueryParam(name) {
			const urlParams = new URLSearchParams(window.location.search);
			return urlParams.get(name);
		}
		// 加载商品数据
		function loadGoods(page = 1) {
			const catId = getQueryParam('catId') || '';
			const pageSize = 10; // 每页显示10条数据
			
			let url = BASE_URL + `/api_goods?page=${page}&pagesize=${pageSize}`;
			if(catId) {
				url += `&catId=${catId}`;
				// 更新当前分类显示
				document.querySelector('.type').textContent = ` > ${document.querySelector(`.typeList a[href*="catId=${catId}"]`).textContent}`;
			}
			
			ajax({
				url: url,
				method: "get",
				type: 'JSON',
				callback: function(data) {
					console.log(data.data);
					let goodsList = data.data;
					let goodcontent = document.querySelector(".good_list_top");
					let text = '';
					
					text += '<div class="good_list_row">';
					if (goodsList[0]) {
						text += `
							<div class="good_list_big">
								<a href="goodinfo.html?goods_id=${goodsList[0].goods_id}">
									<img src="${goodsList[0].goods_thumb}" alt="${goodsList[0].goods_name}" />
								</a>
							</div>
						`;
					}
					
					text += '<div class="good_list_small_container">';
					for (let i = 1; i <= 4; i++) {
						if (goodsList[i]) {
							text += `
								<div class="good_list_small">
									<a href="goodinfo.html?goods_id=${goodsList[i].goods_id}">
										<img src="${goodsList[i].goods_thumb}" alt="${goodsList[i].goods_name}" />
									</a>
								</div>
							`;
						}
					}
					text += '</div></div>';
					
					text += '<div class="good_list_row reverse">';
					text += '<div class="good_list_small_container">';
					for (let i = 5; i <= 8; i++) {
						if (goodsList[i]) {
							text += `
								<div class="good_list_small">
									<a href="goodinfo.html?goods_id=${goodsList[i].goods_id}">
										<img src="${goodsList[i].goods_thumb}" alt="${goodsList[i].goods_name}" />
									</a>
								</div>
							`;
						}
					}
					text += '</div>';
					
					if (goodsList[9]) {
						text += `
							<div class="good_list_big">
								<a href="goodinfo.html?goods_id=${goodsList[9].goods_id}">
									<img src="${goodsList[9].goods_thumb}" alt="${goodsList[9].goods_name}" />
								</a>
							</div>
						`;
					}
					text += '</div>';
					
					goodcontent.innerHTML = text;
					
					// 更新分页信息
					document.getElementById('pageInfo').textContent = `第${page}页`;
					
					// 存储当前页码
					document.getElementById('prevPage').dataset.page = page - 1;
					document.getElementById('nextPage').dataset.page = page + 1;
					
					// 禁用上一页按钮（如果是第一页）
					if(page <= 1) {
						document.getElementById('prevPage').classList.add('disabled');
					} else {
						document.getElementById('prevPage').classList.remove('disabled');
					}
				}
			});
		}

		window.onload = function() {
			// 加载商品分类导航
			getGoodNavType((data) => {
				let typeList = document.querySelector(".type_list>ul");
				let goodListData = data.data;
				let text = '';
				goodListData.forEach((item, index) => {
					text += `<li><a href="goodlist.html?catId=${item.cat_id}"><img src="${item.cat_img}" alt=""/><p>${item.cat_name}</p></a></li>`;
				});
				typeList.innerHTML = text;
			});
			
			// 初始加载商品数据
			let currentPage = parseInt(getQueryParam('page')) || 1;
			loadGoods(currentPage);
			
			// 分页按钮事件
			document.getElementById('prevPage').addEventListener('click', function(e) {
				e.preventDefault();
				let page = parseInt(this.dataset.page);
				if(page >= 1) {
					const catId = getQueryParam('catId') || '';
					window.location.href = `goodlist.html?page=${page}${catId ? '&catId=' + catId : ''}`;
				}
			});
			
			document.getElementById('nextPage').addEventListener('click', function(e) {
				e.preventDefault();
				let page = parseInt(this.dataset.page);
				const catId = getQueryParam('catId') || '';
				window.location.href = `goodlist.html?page=${page}${catId ? '&catId=' + catId : ''}`;
			});
			
		}
	</script>
	<script type="text/javascript" src="js/searchgood.js"></script>
</html>